


import React, { useState, useEffect } from 'react'
import { Button, Steps, Card, Modal, Form, Input, Row, Col, Tooltip, notification } from 'antd';
import moment from "moment"
import { ajax } from '../../api';
import { FormOutlined, PlusCircleOutlined, InfoCircleOutlined, CloseOutlined } from '@ant-design/icons';
import { inject, observer } from 'mobx-react';
import "./index.scss"

let item: any = null
function CardTime({ user, card }: any) {
    const { cardlist, AsyncGetCartlist, changeCardlist } = card
    const { userInfo, changeUserInfo } = user
    const [form] = Form.useForm()
    const [show, setShow] = useState<boolean>(false)
    const [time, setTime]: any = useState(null)
    const [count, setCount]: any = useState(0)
    const { Step } = Steps;
    const cardarr = [
        {
            title: '便签',
            content: '样板',
            disabled: true
        },
    ]
    const onTime = async () => {
        if (count < 1) {
            var date = moment().format('L').replace("/", "-").replace("/", "-")
            var starttime = Date.now()
            let { code, result }: any = await ajax.enterjob({
                date,
                starttime,
                count: 1,
                username: userInfo.username
            })
            if (code == 200) {
                setCount(1)
                localStorage.setItem('count', '1')
                localStorage.setItem('date', date)
            }
        }
        else if (count >= 1) {
            var date = moment().format('L').replace("/", "-").replace("/", "-")
            var endtime = Date.now()
            let { code, result }: any = await ajax.leavejob({
                date,
                endtime,
                count: 2
            })
            if (code == 200) {
                setCount(2)
                localStorage.setItem('count', '2')
                localStorage.setItem('date', date)
            }
        }
    }
    const initcount = () => {
        var date = localStorage.getItem("date")
        var now = moment().format('L').replace("/", "-").replace("/", "-")
        if (date == now) {
            var num = localStorage.getItem("count")
            if (num) {
                setCount(+num)
            } else {
                setCount(0)
            }
        } else {
            setCount(0)
        }
    }

    const changecard = (v: any) => {
        if (!v.disabled) {
            setShow(true)
            item = v
            console.log(item)
            form.setFieldsValue(v)
        } else {
            notification.destroy()
            notification.open({
                message: '提醒',
                description: '这是样板，请先添加便签，再编辑',
                icon: <InfoCircleOutlined style={{ color: 'rgb(236, 84, 14)' }} />
            });
        }
    }
    const handleOk = async () => {
        var formtext = form.getFieldsValue()
        let { code, result }: any = await ajax.setnode({
            ...formtext,
            _id: item._id
        })
        if (code == 200) {
            setShow(false)
            var list = cardlist.map((v: any) => {
                if (v._id == item._id) {
                    v = { ...formtext, _id: item._id }
                }
                return v
            })
            changeCardlist(list)
        }
    }
    const handleCancel = () => {
        setShow(false)
    }
    const addCard = async () => {
        const cardinfo = {
            uid: userInfo._id,
            title: "便签",
            content: '请填写...'
        }
        let { code, result }: any = await ajax.addnote(cardinfo)
        if (code == 200) {
            // if (cardlist[0].disabled) {
            //     changeCardlist([cardinfo])
            // } else {
            //     cardlist.push(cardinfo)
            //     changeCardlist(cardlist)
            // }
            AsyncGetCartlist( {uid: userInfo?._id} )
        }
    }
    const delcard = async (value: any) => {
        if (!value.disabled) {
            let { code, result }: any = await ajax.delnode(value)
            if (code == 200) {
                var list = cardlist.filter((v: any) => v._id != value._id)
                if (list.length > 0) {
                    changeCardlist(list)
                } else {
                    changeCardlist(cardarr)
                }
            }
        } else {
            notification.destroy()
            notification.open({
                message: '提醒',
                description: '这是样板，请先添加便签，再删除',
                icon: <InfoCircleOutlined style={{ color: 'rgb(236, 84, 14)' }} />
            });
        }
    }
    useEffect(() => {
        initcount()
        AsyncGetCartlist({ uid: userInfo?._id })
            .then((res: any) => {
                if (res.length > 0) {
                    changeCardlist(res)
                } else {
                    changeCardlist(cardarr)
                }
            })
    }, [])
    console.log(cardlist)
    return (
        <div style={{ background: "#fff", padding: "20px 30px" }}>
            <Steps style={{ marginTop: 20 }} current={count} percent={count}>
                <Step title="早上好" description="新的一天新的开始" />
                <Step title="上班打卡" description="今天也要努力哦" />
                <Step title="下班打卡" subTitle={time} description="今天上班辛苦啦" />
            </Steps>
            <div style={{ margin: "50px" }}>
                <Button onClick={onTime} type="primary" block size="large">{count < 1 ? '上班' : '下班'}打卡</Button>
            </div>
            <div>
                <Row justify="end" style={{ paddingBottom: 20 }}>
                    <Col>
                        <Tooltip title="添加便签" placement="left">
                            <PlusCircleOutlined className='addbtn' style={{ cursor: "pointer" }} onClick={addCard} />
                        </Tooltip>
                    </Col>
                </Row>
                <Row>
                    {
                        cardlist.map((v: any, i: any) => (
                            <Col key={i} style={{ margin: '0 7px 20px' }}>
                                <Card
                                    title={v.title}
                                    style={v.disabled ? { color: '#ccc', width: 300, minHeight: 200 } : { width: 300, minHeight: 200 }}
                                    extra={<div>
                                        <FormOutlined className="emit" onClick={() => changecard(v)} style={v.disabled ? { color: '#ccc', fontSize: 20 } : { fontSize: 20 }} />
                                        <CloseOutlined className="emit" onClick={() => delcard(v)} style={v.disabled ? { color: '#ccc', fontSize: 20, marginLeft: 10 } : { fontSize: 20, marginLeft: 10 }} />
                                    </div>}>
                                    <p>{v.content}</p>
                                </Card>
                            </Col>
                        ))
                    }
                </Row>
            </div>
            <Modal title="编辑便签"
                visible={show}
                onOk={handleOk}
                onCancel={handleCancel}
                okText="确认"
                cancelText="取消"
            >
                <Form
                    form={form}
                    labelCol={{ span: 24 }}
                    wrapperCol={{ span: 24 }}
                >
                    <Form.Item label="标题" name="title">
                        <Input placeholder='请输入标题' />
                    </Form.Item>
                    <Form.Item label="内容" name="content">
                        <Input.TextArea rows={4} placeholder='请输入内容' />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default inject("user", "card")(observer(CardTime))